<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">

        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-typography.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-typography.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-typography.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-typography.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">样式</h4>
               <p class="text-muted page-title-alt"欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-12">
                            <h4 class="m-t-0 header-title">标题</h4>
                            <p class="text-muted m-b-30 font-13">
                                所有的HTML标题, <code class="highlighter-rouge">&lt;h1&gt;</code> 通过
                                <code>&lt;h6&gt;</code>，是可用的 <code>.h1</code> 通过 <code>.h6</code>
                                类也是可用的，因为当你想匹配一个标题的字体样式，但仍然希望你的文本内联显示
                            </p>

                            <h1>这是一个标题</h1>
                            <p class="text-muted">Suspendisse vel quam malesuada, aliquet sem sit
                                amet, fringilla elit. Morbi
                                tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien
                                nec,
                                varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros
                                hendrerit
                                est consequat posuere et at velit.</p>

                            <div class="clearfix"></div>

                            <h2>这是一个标题 2</h2>
                            <p class="text-muted">In nec rhoncus eros. Vestibulum eu mattis nisl.
                                Quisque viverra viverra magna
                                nec pulvinar. Maecenas pellentesque porta augue, consectetur
                                facilisis diam
                                porttitor sed. Suspendisse tempor est sodales augue rutrum
                                tincidunt.
                                Quisque a malesuada purus.</p>

                            <div class="clearfix"></div>

                            <h3>这是一个标题 3</h3>
                            <p class="text-muted">Vestibulum auctor tincidunt semper. Phasellus ut
                                vulputate lacus. Suspendisse
                                ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl
                                nisi,
                                feugiat quis bibendum vitae, dapibus in tellus.</p>

                            <div class="clearfix"></div>

                            <h4>这是一个标题 4</h4>
                            <p class="text-muted">Nulla et mattis nunc. Curabitur scelerisque
                                commodo condimentum. Mauris
                                blandit, velit a consectetur egestas, diam arcu fermentum justo,
                                eget
                                ultrices arcu eros vel erat.</p>

                            <div class="clearfix"></div>

                            <h5>这是一个标题 5</h5>
                            <p class="text-muted">Quisque nec turpis at urna dictum luctus.
                                Suspendisse convallis dignissim
                                eros at volutpat. In egestas mattis dui. Aliquam mattis dictum
                                aliquet.
                                Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.
                                Vivamus
                                pretium nec odio cursus elementum. Suspendisse molestie ullamcorper
                                ornare.</p>

                            <div class="clearfix"></div>

                            <h6>这是一个标题 6</h6>
                            <p class="text-muted">Donec ultricies, lacus id tempor condimentum, orci
                                leo faucibus sem, a
                                molestie libero lectus ac justo. ultricies mi eros, sit amet tempor
                                nulla
                                varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in
                                tellus.</p>
                        </div>

                    </div>


                    <div class="row mt-5">
                        <div class="col-12">
                            <h4 class="m-t-0 header-title">显示标题</h4>
                            <p class="text-muted m-b-15 font-13">
                                传统的标题元素被设计为在您的页面内容中最好的工作。当你需要一个标题脱颖而出，考虑使用一个 <strong>display heading</strong>—a
                                la一个更大，更自以为是标题的风格.
                            </p>

                            <h1 class="display-1">显示 1</h1>
                            <h1 class="display-2">显示 2</h1>
                            <h1 class="display-3">显示 3</h1>
                            <h1 class="display-4">显示 4</h1>
                        </div>

                    </div>


                    <div class="row mt-5">
                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">内联文本元素</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的真棒文本在这里。
                            </p>

                            <p class="lead m-t-0">
                                Your title goes here
                            </p>

                            You can use the mark tag to
                            <mark>
                                highlight</mark> text.

                            <br><br>

                            <del>This line of text is meant to be treated as deleted text.</del>

                            <br><br>

                            <ins>This line of text is meant to be treated as an addition to the document.</ins>

                            <br><br>

                            <strong>rendered as bold text</strong>

                            <br><br>

                            <em>rendered as italicized text</em>
                        </div>

                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">彩色文本</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的真棒文本在这里。
                            </p>

                            <p class="text-custom">
                                Etiam porta sem malesuada magna mollis euismod.
                            </p>
                            <p class="text-pink">
                                Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p class="text-muted">
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
                            </p>
                            <p class="text-primary">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                            <p class="text-success">
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                            </p>
                            <p class="text-info">
                                Maecenas sed diam eget risus varius blandit sit amet non magna.
                            </p>
                            <p class="text-warning">
                                Etiam porta sem malesuada magna mollis euismod.
                            </p>
                            <p class="text-danger">
                                Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p class="text-dark">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                            <p class="text-purple m-b-0">
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
                            </p>

                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row mt-5">
                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">无序</h4>
                            <p class="text-muted m-b-20 font-13">
                               订单没有明确关系的项目列表。
                            </p>

                            <ul>
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Consectetur adipiscing elit
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                </li>
                                <li>
                                    Facilisis in pretium nisl aliquet
                                </li>
                                <li>
                                    Nulla volutpat aliquam velit
                                    <ul>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                        <li>
                                            Purus sodales ultricies
                                        </li>
                                        <li>
                                            Vestibulum laoreet porttitor sem
                                        </li>
                                        <li>
                                            Ac tristique libero volutpat at
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Aenean sit amet erat nunc
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ul>

                        </div>

                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">有序</h4>
                            <p class="text-muted m-b-20 font-13">
                                订单明确涉及的项目列表
                            </p>

                            <ol>
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Consectetur adipiscing elit
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                </li>
                                <li>
                                    Facilisis in pretium nisl aliquet
                                </li>
                                <li>
                                    Nulla volutpat aliquam velit
                                    <ol>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                        <li>
                                            Purus sodales ultricies
                                        </li>
                                        <li>
                                            Vestibulum laoreet porttitor sem
                                        </li>
                                        <li>
                                            Ac tristique libero volutpat at
                                        </li>
                                    </ol>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Aenean sit amet erat nunc
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ol>
                        </div>

                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">无样式</h4>
                            <p class="text-muted m-b-20 font-13">
                                <strong>这只适用于直接的子项列表项</strong>, m这意味着您将需要为任何嵌套列表添加类.
                            </p>

                            <ul class="list-unstyled">
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                    <ul>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ul>

                            <h5>Inline</h5>
                            <p class="text-muted m-b-15 font-13">
                                Place all list items on a single line with <code>
                                display: inline-block;</code>
                                and some light padding.
                            </p>

                            <ul class="list-inline m-b-0">
                                <li class="list-inline-item">
                                    Lorem ipsum
                                </li>
                                <li class="list-inline-item">
                                    Phasellus iaculis
                                </li>
                                <li class="list-inline-item">
                                    Nulla volutpat
                                </li>
                            </ul>

                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row mt-5">
                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">块报价</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的真棒文本在这里。
                            </p>

                            <blockquote class="blockquote">
                                <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite
                                        title="Source Title">Source Title</cite></footer>
                            </blockquote>

                            <p class="text-muted m-b-15 m-t-20 font-13">
                                Add <code>
                                .blockquote-reverse</code>
                                for a blockquote with right-aligned content.
                            </p>

                            <blockquote class="blockquote blockquote-reverse">
                                <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite
                                        title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>

                    </div>
                    <!-- end row -->

                    <!-- Row start -->
                    <div class="row mt-5">
                        <div class="col-sm-12">
                            <h4 class="m-t-0 header-title"><b>Dropcap</b></h4>
                            <p class="text-muted m-b-15 font-13">
                                使用s <code>.dropcap</code> 让内容文本的第一个字母下拉的类.
                            </p>

                            <p><span class="dropcap text-primary">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
                                Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore,
                                quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem
                                ipsum dolor sit amet.</p>

                            <p class="m-b-0"><span class="dropcap text-pink">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
                                Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore,
                                quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem
                                ipsum dolor sit amet.</p>
                        </div>

                    </div>
                    <!-- End of Row -->

                </div>
            </div>

        </div>
        <!-- end row -->

                   
        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>